<template>
  <div id="map-container" style="width: 100%; height: 100vh;"></div>
</template>

<script>
import * as echarts from 'echarts'; // 导入 ECharts
import * as THREE from 'three'; // 导入 Three.js
import hz from '@/data/hz.json'; // 导入地图数据
import wl from '@/data/wl2.json'; // 导入地图数据
export default {
  name: 'ThreeDMap',
  mounted() {
    this.init3DMap();
  },
  methods: {
    init3DMap() {
      // 1. 初始化 ECharts 实例
      const myChart = echarts.init(document.getElementById('map-container'));

      // 2. 准备县级市的 GeoJSON 数据
      const geoJson = wl; // 此处需要加载您县级市的 GeoJSON 数据

      // 注册地图
      echarts.registerMap('myCity', geoJson);

      // 3. 配置 ECharts 地图
      const option = {
        backgroundColor: '#0f1c3d', // 背景色
        geo: {
          map: 'myCity',
          roam: true, // 支持缩放和平移
          itemStyle: {
            areaColor: '#1b4879', // 区域填充色
            borderColor: '#00ffff', // 区域边界色
            shadowColor: 'rgba(0, 0, 0, 0.5)',
            shadowBlur: 10,
          },
          emphasis: {
            itemStyle: {
              areaColor: '#2a333d', // 高亮区域颜色
            },
          },
        },
        series: [
          {
            type: 'map3D',
            map: 'myCity',
            shading: 'lambert',
            regionHeight: 3, // 地图的高度
            itemStyle: {
              color: '#1f66b5',
              borderColor: '#00f',
              borderWidth: 1,
              opacity: 0.8,
              borderType: 'solid',
            },
            emphasis: {
              label: {
                show: true,
                textStyle: {
                  color: '#fff',
                  fontSize: 16,
                  backgroundColor: 'rgba(0,0,0,0.5)',
                },
              },
              itemStyle: {
                color: '#3B5077',
              },
            },
          },
        ],
      };

      // 4. 设置配置项
      myChart.setOption(option);

      // 5. Three.js 渲染 3D 特效
      this.initThreeJS();
    },

    // Three.js 初始化方法
    initThreeJS() {
      // 创建场景
      const scene = new THREE.Scene();

      // 创建相机
      const camera = new THREE.PerspectiveCamera(
        45,
        window.innerWidth / window.innerHeight,
        1,
        1000
      );
      camera.position.set(0, 0, 500); // 设置相机位置

      // 创建渲染器
      const renderer = new THREE.WebGLRenderer({ antialias: true });
      renderer.setSize(window.innerWidth, window.innerHeight);
      renderer.setClearColor(0x0f1c3d, 1);
      document.getElementById('map-container').appendChild(renderer.domElement);

      // 添加光源
      const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
      scene.add(ambientLight);

      const pointLight = new THREE.PointLight(0xffffff, 0.8);
      pointLight.position.set(200, 200, 300);
      scene.add(pointLight);

      // 添加地图边界光效（简化示例，详细效果需基于实际地图模型）
      const edges = new THREE.EdgesGeometry(
        new THREE.BoxGeometry(100, 100, 20)
      );
      const line = new THREE.LineSegments(
        edges,
        new THREE.LineBasicMaterial({ color: 0x00ffff })
      );
      scene.add(line);

      // 渲染循环
      function animate() {
        requestAnimationFrame(animate);
        renderer.render(scene, camera);
      }
      animate();
    },
  },
};
</script>

<style scoped>
#map-container {
  position: relative;
  overflow: hidden;
}
</style>
